<template>
  <div class="video-upload">
    <!-- 统一上传区域 -->
    <div class="upload-section">
      <a-upload-dragger
        v-model:fileList="fileList"
        :before-upload="beforeUpload"
        :show-upload-list="false"
        multiple
        accept="video/*"
        class="upload-dragger"
      >
        <div class="upload-content">
          <InboxOutlined class="upload-icon" />
          <p class="upload-text">
            点击或拖拽视频到此区域上传
          </p>
          <p class="upload-hint">
            支持单个或批量上传，每个视频不超过100MB
          </p>
          <p class="chunk-hint">
            <span class="hint-icon">🚀</span>
            视频超过5MB将自动启用分片上传，支持断点续传
          </p>
        </div>
      </a-upload-dragger>
    </div>

    <!-- 批量设置区域 -->
    <div class="batch-settings-section">
      <div class="settings-header">
        <a-switch
          v-model:checked="useBatchSettings"
          checked-children="统一设置"
          un-checked-children="单独设置"
        />
        <span class="settings-tip">开启后将统一设置所有视频的参数</span>
      </div>

      <!-- 批量设置表单 -->
      <div v-if="useBatchSettings" class="batch-form">
        <div class="form-row">
          <div class="form-label">文件名：</div>
          <div class="form-input half-width">
            <a-input
              v-model:value="batchSettings.prefix"
              placeholder="请输入文件名"
              @change="applyBatchSettings('prefix')"
            />
          </div>
          <div class="form-label">公开性：</div>
          <div class="form-input">
            <a-switch
              v-model:checked="batchSettings.isPublic"
              checked-children="公开"
              un-checked-children="私密"
              @change="applyBatchSettings('isPublic')"
            />
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-label">分类：</div>
          <div class="form-input half-width">
            <a-select
              v-model:value="batchSettings.category"
              placeholder="请选择分类"
              allowClear
              @change="applyBatchSettings('category')"
            >
              <a-select-option v-for="category in categories" :key="category" :value="category">
                {{ category }}
              </a-select-option>
            </a-select>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-label">标签：</div>
          <div class="form-input half-width">
            <a-select
              v-model:value="batchSettings.tags"
              mode="multiple"
              placeholder="请选择标签（可多选，最多4个）"
              allowClear
              maxTagCount="responsive"
              @change="handleBatchTagsChange"
            >
              <a-select-option v-for="tag in tags" :key="tag" :value="tag">
                {{ tag }}
              </a-select-option>
            </a-select>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-label">描述：</div>
          <div class="form-input full-width">
            <a-textarea
              v-model:value="batchSettings.description"
              placeholder="请输入视频描述"
              :rows="4"
              @change="applyBatchSettings('description')"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 列表 -->
    <div class="list-section">
      <div v-if="previewList.length === 0" class="no-items-message">
        <InboxOutlined />
        <p>暂无视频待上传</p>
      </div>
      <div v-else class="list-header">
        <h3>待上传视频 ({{ previewList.length }})</h3>
        <p class="list-subtitle">点击视频项可展开设置参数</p>
        <div class="batch-actions">
          <a-button @click="clearAll" :disabled="previewList.length === 0">
            <template #icon><ClearOutlined /></template>
            清空
          </a-button>
          <a-button
            type="primary"
            @click="startBatchUpload"
            :loading="batchUploading"
            :disabled="previewList.length === 0"
          >
            <template #icon><CloudUploadOutlined /></template>
            开始批量上传
          </a-button>
        </div>
      </div>

      <div v-for="(item, index) in previewList" :key="index" class="list-item">
        <!-- 列表项头部 -->
        <div class="item-header" @click="toggleExpanded(index)">
          <div class="item-left">
            <div class="expand-icon">
              <DownOutlined v-if="item.expanded" />
              <RightOutlined v-else />
            </div>
            <div class="item-preview">
              <video :src="item.preview" controls muted></video>
            </div>
            <div class="item-info">
              <div class="item-name">{{ truncateFileName(item.fileName) }}</div>
              <div class="item-meta">
                <span>时长: {{ formatDuration(item.duration) }}</span>
                <span v-if="item.resolution">
                  分辨率: {{ item.resolution.width }}×{{ item.resolution.height }}
                </span>
                <span>大小: {{ formatFileSize(item.fileSize) }}</span>
              </div>
            </div>
          </div>
          <div class="item-right">
            <div class="upload-status">
              <span class="status-text">{{ item.uploadMessage }}</span>
              <span class="progress-text">{{ item.uploadProgress }}%</span>
            </div>
            <div class="action-buttons">
              <a-button
                v-if="item.uploadStatus === 'uploading'"
                type="text"
                size="small"
                @click.stop="cancelUpload(index)"
                class="cancel-btn"
              >
                <CloseOutlined />
              </a-button>
              <a-button
                v-if="item.uploadStatus === 'failed'"
                type="text"
                size="small"
                @click.stop="retryUpload(index)"
                class="retry-btn"
              >
                <SyncOutlined />
              </a-button>
              <a-button
                type="text"
                size="small"
                @click.stop="removeItem(index)"
                class="delete-btn"
              >
                <DeleteOutlined />
              </a-button>
            </div>
          </div>
        </div>

        <!-- 展开的内容区域 -->
        <div v-if="item.expanded" class="item-content">
          <div class="content-divider"></div>
          
          <!-- 单独设置表单 -->
          <div v-if="!useBatchSettings" class="item-form">
            <div class="form-row">
              <div class="form-label">文件名：</div>
              <div class="form-input half-width">
                <a-input v-model:value="item.fileName" placeholder="请输入文件名" />
              </div>
              <div class="form-label">公开性：</div>
              <div class="form-input">
                <a-switch
                  v-model:checked="item.isPublic"
                  checked-children="公开"
                  un-checked-children="私密"
                />
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-label">分类：</div>
              <div class="form-input half-width">
                <a-select
                  v-model:value="item.category"
                  placeholder="请选择分类"
                >
                  <a-select-option v-for="category in categories" :key="category" :value="category">
                    {{ category }}
                  </a-select-option>
                </a-select>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-label">标签：</div>
              <div class="form-input half-width">
                <a-select
                  v-model:value="item.tags"
                  mode="multiple"
                  placeholder="请选择标签（可多选，最多4个）"
                  @change="tags => handleTagsChange(tags, 'item', index)"
                >
                  <a-select-option v-for="tag in tags" :key="tag" :value="tag">
                    {{ tag }}
                  </a-select-option>
                </a-select>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-label">描述：</div>
              <div class="form-input full-width">
                <a-textarea
                  v-model:value="item.description"
                  placeholder="请输入视频描述"
                  :rows="4"
                />
              </div>
            </div>
          </div>
          
          <!-- 批量设置时的信息展示 -->
          <div v-else class="batch-info">
            <div class="batch-info-header">
              <h4>当前设置信息（统一设置模式）</h4>
              <p class="batch-info-tip">在统一设置模式下，所有视频将使用相同的参数</p>
            </div>
            <div class="form-row">
              <div class="form-label">文件名：</div>
              <div class="form-input half-width">
                <div class="info-text">{{ truncateFileName(item.fileName) }}</div>
              </div>
              <div class="form-label">公开性：</div>
              <div class="form-input">
                <div class="info-text">{{ item.isPublic ? '公开' : '私密' }}</div>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-label">分类：</div>
              <div class="form-input half-width">
                <div class="info-text">{{ item.category || '未设置' }}</div>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-label">标签：</div>
              <div class="form-input half-width">
                <div class="info-text">{{ item.tags.length > 0 ? item.tags.join(', ') : '未设置' }}</div>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-label">描述：</div>
              <div class="form-input full-width">
                <div class="info-text description-text">{{ item.description || '未设置' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import {
  InboxOutlined,
  ClearOutlined,
  CloudUploadOutlined,
  DeleteOutlined,
  CloseOutlined,
  SyncOutlined,
  DownOutlined,
  RightOutlined,
} from '@ant-design/icons-vue'

import {
  uploadVideosUsingPost1,
  getCategoriesUsingGet1,
  getTagsUsingGet1,
} from '@/api/tupianguanlijiekou'

// 文件列表
const fileList = ref<File[]>([])
// 预览列表
const previewList = ref<VideoItem[]>([])

// 加载状态
const batchUploading = ref(false)

// 分类和标签
const categories = ref<string[]>([])
const tags = ref<string[]>([])

// 批量设置开关
const useBatchSettings = ref(false)

// 批量设置
const batchSettings = ref({
  prefix: '',
  description: '',
  category: '',
  tags: [] as string[],
  isPublic: true,
})

interface VideoItem {
  type: 'video'
  file: File
  fileName: string
  preview: string
  description: string
  category?: string
  tags: string[]
  isPublic: boolean
  fileSize: number
  duration: number
  resolution: {
    width: number
    height: number
  }
  thumbnail?: string
  uploadStatus: 'waiting' | 'uploading' | 'success' | 'failed' | 'cancelled'
  uploadProgress: number
  uploadMessage: string
  expanded: boolean
}

// 格式化文件大小
const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 格式化时长
const formatDuration = (seconds: number) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = Math.floor(seconds % 60)
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 切换展开状态
const toggleExpanded = (index: number) => {
  const item = previewList.value[index]
  item.expanded = !item.expanded
}

// 移除项目
const removeItem = (index: number) => {
  previewList.value.splice(index, 1)
}

// 开始批量上传
const startBatchUpload = async () => {
  if (previewList.value.length === 0) {
    message.warning('请先选择要上传的视频')
    return
  }

  batchUploading.value = true

  // 重置所有状态
  previewList.value.forEach(item => {
    item.uploadStatus = 'waiting'
    item.uploadProgress = 0
    item.uploadMessage = '等待上传'
  })

  // 逐个上传
  for (let i = 0; i < previewList.value.length; i++) {
    const item = previewList.value[i]

    // 检查是否被取消
    if (item.uploadStatus === 'cancelled') {
      continue
    }

    try {
      // 更新状态为上传中
      item.uploadStatus = 'uploading'
      item.uploadMessage = '上传中...'
      item.uploadProgress = 0

      // 准备上传参数
      const params = {
        prefix: item.fileName.split('.')[0],
        category: item.category || '',
        description: item.description,
        isPublic: item.isPublic ? 1 : 0,
        tags: JSON.stringify(item.tags || []),
      }

      // 调用视频上传接口
      const res = await uploadVideosUsingPost1(params, {
        file: item.file,
      })

      if (res && res.data.code === 200) {
        item.uploadStatus = 'success'
        item.uploadProgress = 100
        item.uploadMessage = '上传成功'
      } else {
        item.uploadStatus = 'failed'
        item.uploadMessage = res?.data?.message || '上传失败'
      }
    } catch (error: unknown) {
      const errorMessage = error instanceof Error ? error.message : '上传失败'
      item.uploadStatus = 'failed'
      item.uploadMessage = errorMessage
    }
  }

  batchUploading.value = false
  message.success(`批量上传完成，共 ${previewList.value.filter(item => item.uploadStatus === 'success').length} 个文件成功`)
}

// 取消上传
const cancelUpload = (index: number) => {
  const item = previewList.value[index]
  if (item.uploadStatus === 'uploading') {
    item.uploadStatus = 'cancelled'
    item.uploadProgress = 0
    item.uploadMessage = '已取消'
    message.info(`视频 "${item.fileName}" 已取消上传`)
  }
}

// 重试上传
const retryUpload = async (index: number) => {
  const item = previewList.value[index]
  if (item.uploadStatus === 'failed') {
    item.uploadStatus = 'waiting'
    item.uploadProgress = 0
    item.uploadMessage = '等待重试'
    message.info(`视频 "${item.fileName}" 已加入重试队列`)
  }
}

// 清空所有
const clearAll = () => {
  previewList.value = []
  fileList.value = []
  message.success('已清空所有视频')
}

// 文件上传前的处理
const beforeUpload = (file: File) => {
  // 检查文件类型
  if (!file.type.startsWith('video/')) {
    message.error('只能上传视频文件！')
    return false
  }

  // 检查文件大小（100MB）
  const maxSize = 100 * 1024 * 1024
  if (file.size > maxSize) {
    message.error('视频文件大小不能超过100MB！')
    return false
  }

  // 创建预览URL
  const preview = URL.createObjectURL(file)

  // 获取视频信息
  const video = document.createElement('video')
  video.preload = 'metadata'
  video.onloadedmetadata = () => {
    const videoItem: VideoItem = {
      type: 'video',
      file,
      fileName: file.name,
      preview,
      description: '',
      category: undefined,
      tags: [],
      isPublic: true,
      fileSize: file.size,
      duration: video.duration || 0,
      resolution: {
        width: video.videoWidth || 0,
        height: video.videoHeight || 0,
      },
      uploadStatus: 'waiting',
      uploadProgress: 0,
      uploadMessage: '等待上传',
      expanded: false,
    }

    previewList.value.push(videoItem)
  }
  video.src = preview

  return false // 阻止默认上传行为
}

// 应用批量设置
const applyBatchSettings = (field: keyof typeof batchSettings.value) => {
  if (useBatchSettings.value) {
    previewList.value.forEach(item => {
      switch (field) {
        case 'prefix':
          const originalName = item.file.name
          const extension = originalName.substring(originalName.lastIndexOf('.'))
          item.fileName = batchSettings.value.prefix + extension
          break
        case 'description':
          item.description = batchSettings.value.description
          break
        case 'category':
          item.category = batchSettings.value.category || undefined
          break
        case 'isPublic':
          item.isPublic = batchSettings.value.isPublic
          break
      }
    })
  }
}

// 处理标签变更
const handleTagsChange = (selectedTags: string[], type: 'batchSettings' | 'item', index?: number) => {
  if (type === 'batchSettings') {
    batchSettings.value.tags = selectedTags
    if (useBatchSettings.value) {
      previewList.value.forEach(item => {
        item.tags = [...selectedTags]
      })
    }
  } else if (type === 'item' && index !== undefined) {
    previewList.value[index].tags = selectedTags
  }
}

// 处理批量标签变更
const handleBatchTagsChange = (selectedTags: string[]) => {
  batchSettings.value.tags = selectedTags
  if (useBatchSettings.value) {
    previewList.value.forEach(item => {
      item.tags = [...selectedTags]
    })
  }
}

// 获取分类和标签
const fetchCategories = async () => {
  try {
    const res = await getCategoriesUsingGet1()
    if (res.data.code === 200) {
      categories.value = res.data.data as string[]
    }
  } catch (error) {
    console.error('获取分类失败:', error)
  }
}

const fetchTags = async () => {
  try {
    const res = await getTagsUsingGet1()
    if (res.data.code === 200) {
      tags.value = res.data.data as string[]
    }
  } catch (error) {
    console.error('获取标签失败:', error)
  }
}

// 截断文件名，显示省略号
const truncateFileName = (fileName: string, maxLength: number = 20) => {
  if (fileName.length <= maxLength) {
    return fileName
  }
  return fileName.substring(0, maxLength) + '...'
}

// 监听批量设置变更，实时应用到所有视频项
watch(batchSettings, (newSettings) => {
  if (useBatchSettings.value) {
    previewList.value.forEach(item => {
      // 更新文件名
      if (newSettings.prefix) {
        const originalName = item.file.name
        const extension = originalName.substring(originalName.lastIndexOf('.'))
        item.fileName = newSettings.prefix + extension
      }
      
      // 更新其他字段
      item.description = newSettings.description || ''
      item.category = newSettings.category || undefined
      item.tags = [...(newSettings.tags || [])]
      item.isPublic = newSettings.isPublic
    })
  }
}, { deep: true })

onMounted(async () => {
  await fetchCategories()
  await fetchTags()
})

defineExpose({
  handleTagsChange,
  handleBatchTagsChange,
  truncateFileName,
  toggleExpanded,
  removeItem,
  startBatchUpload,
})
</script>

<style scoped>
.video-upload {
  padding: 24px;
  background: var(--theme-surface);
  border-radius: 12px;
  box-shadow: 0 2px 12px var(--theme-shadow);
  width: 100%;
  margin: 0;
  min-height: calc(100vh - 120px);
  height: calc(100vh - 120px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.upload-section {
  margin-bottom: 24px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.upload-dragger {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  max-height: 300px;
  width: 100%;
  max-width: 600px;
}

.upload-content {
  text-align: center;
  padding: 20px;
  width: 100%;
  max-width: 600px;
}

.upload-icon {
  font-size: 48px;
  color: var(--theme-primary);
  margin-bottom: 16px;
  transition: color 0.3s ease;
}

.upload-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--theme-text);
  margin-bottom: 8px;
  transition: color 0.3s ease;
  text-shadow: 0 1px 2px var(--theme-shadow);
  letter-spacing: 0.5px;
}

.upload-hint {
  font-size: 14px;
  color: var(--theme-textSecondary);
  margin-bottom: 8px;
  transition: color 0.3s ease;
  font-weight: 500;
  line-height: 1.6;
}

.chunk-hint {
  font-size: 13px;
  color: var(--theme-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.3s ease;
  font-weight: 700;
  text-shadow: 0 1px 2px var(--theme-shadow);
}

.hint-icon {
  font-size: 16px;
}

/* 批量设置区域 */
.batch-settings-section {
  margin-bottom: 24px;
  flex-shrink: 0;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 10px;
  flex-shrink: 0;
  width: 100%;
  max-width: 600px;
  align-self: center;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.settings-tip {
  font-size: 14px;
  color: var(--theme-textSecondary);
  transition: color 0.3s ease;
  font-weight: 500;
}

.batch-form {
  background: var(--theme-background);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.form-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--theme-text);
  min-width: 80px;
  transition: color 0.3s ease;
  text-shadow: 0 1px 2px var(--theme-shadow);
}

.form-input {
  flex: 1;
}

.half-width {
  max-width: 200px;
}

.full-width {
  width: 100%;
}

/* 特殊处理包含公开性开关的行 */
.form-row .form-input:last-child {
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
}

/* 确保输入框组件占满容器 */
.form-input .ant-input,
.form-input .ant-select,
.form-input .ant-textarea {
  width: 100%;
}

.info-text {
  padding: 8px 12px;
  background: var(--theme-background);
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  color: var(--theme-text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 32px;
  display: flex;
  align-items: center;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.3s ease;
  font-weight: 500;
}

.description-text {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.6;
  min-height: 80px;
  align-items: flex-start;
  padding-top: 8px;
}

.batch-info {
  padding: 16px;
  max-height: 220px;
  overflow-y: auto;
  margin: 16px;
  background: var(--theme-background);
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  transition: all 0.3s ease;
}

.batch-info-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-border);
  transition: border-color 0.3s ease;
}

.batch-info-header h4 {
  margin: 0 0 8px 0;
  color: var(--theme-text);
  font-size: 18px;
  font-weight: 700;
  transition: color 0.3s ease;
  text-shadow: 0 1px 2px var(--theme-shadow);
}

.batch-info-tip {
  color: var(--theme-textSecondary);
  font-size: 14px;
  transition: color 0.3s ease;
  font-weight: 500;
}

.batch-actions {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--theme-border);
  transition: border-color 0.3s ease;
}

/* 列表 */
.list-section {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  align-self: center;
}

.no-items-message {
  text-align: center;
  padding: 100px 0;
  color: var(--theme-textSecondary);
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: color 0.3s ease;
  font-weight: 600;
}

.no-items-message .anticon {
  font-size: 48px;
  color: var(--theme-border);
  transition: color 0.3s ease;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
  flex-shrink: 0;
}

.list-header h3 {
  margin: 0 0 4px 0;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 600;
}

.list-subtitle {
  color: #666;
  font-size: 14px;
}

.list-item {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #fff;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 12px;
  min-height: 80px;
}

.list-item:hover {
  border-color: #1890ff;
  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.12);
  transform: translateY(-1px);
}

.item-header {
  padding: 16px 20px;
  background: var(--theme-background);
  border-bottom: 1px solid var(--theme-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.item-header:hover {
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
}

.item-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.expand-icon {
  color: #666;
  font-size: 14px;
  transition: transform 0.3s ease;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.item-preview {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f0f0f0;
  border: 1px solid #e8e8e8;
}

.item-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-name {
  font-weight: 700;
  color: var(--theme-text);
  font-size: 16px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
  margin: 0;
  transition: color 0.3s ease;
  text-shadow: 0 1px 2px var(--theme-shadow);
}

.item-meta {
  font-size: 13px;
  color: var(--theme-textSecondary);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  transition: color 0.3s ease;
  font-weight: 500;
}

.item-meta span {
  background: var(--theme-background);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  transition: background 0.3s ease;
  font-weight: 600;
}

.item-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  min-width: 200px;
}

.upload-status {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  flex-direction: column;
  align-items: flex-start;
}

.status-text {
  color: var(--theme-primary);
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.3s ease;
  text-shadow: 0 1px 2px var(--theme-shadow);
}

.progress-text {
  color: var(--theme-secondary);
  font-weight: 700;
  font-size: 14px;
  transition: color 0.3s ease;
  text-shadow: 0 1px 2px var(--theme-shadow);
}

.action-buttons {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.item-content {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 10px;
  background: var(--theme-background);
  border-top: 1px solid var(--theme-border);
  animation: slideDown 0.3s ease-out;
  transition: all 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 280px;
  }
}

.content-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--theme-border) 50%, transparent 100%);
  margin: 0 20px;
  transition: background 0.3s ease;
}

.item-form {
  padding: 16px;
  background: var(--theme-background);
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  max-height: 220px;
  overflow-y: auto;
  margin: 16px;
  transition: all 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .video-upload {
    padding: 16px;
  }

  .upload-dragger {
    min-height: 200px;
  }

  .list-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
  }

  .item-left {
    width: 100%;
    justify-content: flex-start;
    min-width: auto;
  }

  .item-preview {
    width: 50px;
    height: 50px;
  }

  .item-info {
    width: 100%;
    text-align: left;
  }

  .item-name {
    max-width: 250px;
  }

  .item-meta {
    flex-direction: column;
    gap: 6px;
  }

  .item-meta span {
    display: inline-block;
    width: fit-content;
  }

  .item-right {
    width: 100%;
    justify-content: space-between;
    min-width: auto;
  }

  .upload-status {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .item-form {
    padding: 16px;
  }

  .batch-info {
    padding: 16px;
  }

  /* 移动端表单布局调整 */
  .form-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .form-label {
    min-width: auto;
    width: 100%;
  }

  .form-input.half-width {
    width: 100%;
    flex: 0 0 100%;
    max-width: none;
  }

  .form-input.full-width {
    width: 100%;
    flex: 0 0 100%;
  }

  /* 移动端特殊处理包含公开性开关的行 */
  .form-row .form-input:last-child {
    flex: 0 0 auto;
    width: auto;
    margin-left: 0;
    align-self: flex-end;
  }
}
</style> 